<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据代理</title>
    <script src="../js/vue.js"></script>
</head>
<body>

<div id="root">

</div>
</body>
<script type="text/javascript">
    //数据代理是通过一个对象代理另一个对象的属性的方式来实现的
    let person = {name: '张三', age: 18};
    let temp = "排球"
    Object.defineProperty(person, 'hobby', {
       // writable: true//是否可修改
       // , enumerable: true//是否可遍历
       // , configurable: true,//是否可删除
        get() {
            return temp;
        }
        , set(newVal) {
            temp = newVal;
        }
    });//不可枚举不可遍历
    console.log(person)
    //遍历对象的属性
    for (let personKey in person) {
        console.log(personKey);
    }

</script>
</html>